<template>
    <div class="goods-list">
        <div class="goods-item" v-for="item in 5" :key="item" @click="goDetil(item)">
            <img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" alt="">
            <h4 class="title">我是商品的title</h4>
            <div class="info">
                <p class="price">
                    <span class="now">¥ 1999</span>
                    <span class="old">¥ 2199</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩余50件</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return {
            list: [],
        }
    },
    created(){

    },
    mounted(){
        
    },
    methods:{
        goDetil(id){
            // 第一种字符串方式
            // this.$router.push('/home/goodsInfo/'+id)
            // 第二种对象
            // this.$router.push({path: '/home/goodsInfo/'+id})
            // 第三种命名路由
            this.$router.push({name: 'goodsinfo',params: {id: id}})
            //第四种带查询参数
            // this.$router.push({path: 'goodsinfo',query: {id: id}})
            
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-list{
    display: flex;
    flex-wrap: wrap;//让flex子模块换行
    padding: 4px 8px;
    justify-content: space-between;//内容两端对齐
    .goods-item{
        margin: 4px 0;
        width: 49%;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px #ccc;

        display: flex;
        flex-direction: column;//改变flex方向为纵向，横向默认为 row
        justify-content: space-between;
        img{
            width: 100%;
        }
        .title{
            padding: 4px;
        }
        .info{
            padding: 6px;
            background-color: #eee;
            p{
                margin: 0;
            }
            .price{
                .now{
                    color: red;
                    font-weight: bolder;
                }
                .old{
                    text-decoration: line-through;
                }
            }
            .sell{
                display: flex;
                justify-content: space-between;
                font-size: 12px;
            }
        }
        
    }
}
</style>